<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/vCloak.css" />
	</head>
	<style type="text/css">
		* {
			color: #333;
		}
		
		#pullrefresh {
			background: #F3F3EF;
		}
		
		.main {
			padding: 8px 12px;
		}
		
		.message {
			background: #fff;
			border-radius: 6px;
			margin-bottom: 8px;
		}
		
		.message:last-child {
			margin: 0;
		}
		
		.msg_head,
		.msg_data {
			display: flex;
		}
		
		.msg_data {
			padding: 12px;
		}
		
		.msg_head {
			padding: 6px 20px 6px 12px;
			border-bottom: 1px solid #F2F2F2;
		}
		
		.msghead_data {
			font-size: 12px;
			flex: 1;
			line-height: 16px;
		}
		
		.msghead_img {
			width: 30px;
			height: 30px;
			margin-right: 8px;
			border-radius: 50%;
			overflow: hidden;
		}
		
		.msghead_img>img {
			width: 100%;
			height: 100%;
			vertical-align: middle;
		}
		
		.msgdata_main {
			flex: 3;
		}
		
		.msg_data_img {
			width: 48px;
			margin-right: 12px;
		}
		
		.msg_data_img>img {
			width: 100%;
			vertical-align: middle;
		}
		
		.msg_title {
			line-height: 32px;
			font-size: 12px;
			color: #B2B2B2;
		}
		
		.data_title {
			font-size: 14px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			width: 100%;
		}
		
		.deadline {
			font-size: 12px;
			color: #B2B2B2;
			margin: 2px 0;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			width: 100%;
		}
		
		.release {
			font-size: 12px;
			color: #B2B2B2;
		}
		
		.msghead_rank {
			display: inline-block;
			border-radius: 4px;
			padding: 0 2px;
			border: 1px solid #C9BAE8;
		}
		
		.msghead_rank span {
			color: #C9BAE8;
		}
		
		.release div {
			display: inline-block;
		}
		
		.release>div {
			margin-right: 8px;
		}
		
		.release_img {
			width: 14px;
		}
		
		.release span {
			color: #B2B2B2;
		}
		
		.release_img>img {
			width: 100%;
			vertical-align: sub;
		}
		
		.deadline>div {
			display: inline-block;
			color: #B2B2B2;
			margin-right: 10px;
		}
		
		.score {
			flex: 1;
			padding: 12px 0px;
			min-width: 60px;
		}
		
		.score>div {
			text-align: center;
			border-left: 1px solid #F2F2F2;
		}
		
		.score_num {
			color: #F64E4E;
			font-size: 18px;
		}
		
		.score_text {
			color: #B2B2B2;
			font-size: 12px;
		}
		
		.empty {
			width: 100%;
			border: 0;
			display: block;
		}
		
		.emptys {
			margin-top: 35%;
		}
	</style>

	<body>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<div class="main">
					<div class="message" v-for="list in list" :studentUid="list.studentUid" :publicDate="list.publicDate" :readingRecordUid="list.readingRecordUid">
						<div class="msg_head">
							<div class="msghead_img"><img :src="list.studentAvatar" v-cloak/></div>
							<div class="msghead_data">
								<div class="msghead_name" v-cloak>{{list.studentName}}</div>
								<div class="msghead_rank"><span v-cloak>{{list.desc}}</span></div>
							</div>
							<div class="msg_title" v-cloak>{{list.publicDate}}</div>
						</div>
						<div class="msg_data">
							<div class="msg_data_img"><img :src="list.picUrl" v-cloak/></div>
							<div class="msgdata_main">
								<div class="data_title"><span v-cloak>{{list.caseName}}</span></div>
								<div class="deadline">
									<div><span v-cloak>{{list.grade}}</span></div>
								</div>
								<div class="release">
									<div>
										<div class="release_img"><img src="../../imges/Union 231.png" /></div>
										<span v-cloak>{{list.totalLike}}</span>
									</div>
									<div>
										<div class="release_img"><img src="../../imges/Subtraction 87.png" /></div>
										<span v-cloak>{{list.commentCount}}</span>
									</div>
								</div>
							</div>
							<!--<div class="score">
								<div class="">
									<div class="score_num">{{list.readingScore}}</div>
									<div class="score_text">得分</div>
								</div>
							</div>-->
						</div>
					</div>

					<!--<div class="message">
						<div class="msg_head">
							<div class="msghead_img"><img src="../../imges/Mask Group 34.png" /></div>
							<div class="msghead_data">
								<div class="msghead_name">汉克斯</div>
								<div class="msghead_rank">水星人</div>
							</div>
							<div class="msg_title">15:23</div>
						</div>
						<div class="msg_data">
							<div class="msg_data_img"><img src="../../imges/230451820479512246.jpg" /></div>
							<div class="msgdata_main">
								<div class="data_title">飞来的伤心梅</div>
								<div class="deadline">
									<div>三年级上册 </div>
									<div> 第二十一课</div>
								</div>
								<div class="release">
									<div>
										<div class="release_img"><img src="../../imges/Union 231.png" /></div>
										<span>34</span>
									</div>
									<div>
										<div class="release_img"><img src="../../imges/Subtraction 87.png" /></div>
										<span>12</span>
									</div>
								</div>
							</div>
							<div class="score">
								<div class="">
									<div class="score_num">92</div>
									<div class="score_text">得分</div>
								</div>
							</div>
						</div>
					</div>-->

				</div>
			</div>
		</div>

		<div class="emptys">
			<iframe src="kong2.html" class="empty"></iframe>
		</div>

		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/zepto_1.1.3.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/common/common.js"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			//查询热门或最新朗读
			var books = new Vue({
				el: '.main',
				data: {
					list: []
				}
			})

			var temp = 1

			function pullupRefresh(aa) {
				common.ajax('student/reading/queryHot', {
					uid: common.uid,
					token: common.token,
					type: 2, //查询类型,1为热门,2为最新
					page: temp++,
					pageSize: 5 //多少页
				}, function(data) {
					if(data.code == 200) {
						console.log(data)
						if(!data.data.hasNextPage) {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
						} else {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh();
						}

						if(data.data.list.length == 0) {
							$(".empty").css("display", "block")
							$("#pullrefresh").css("display", "none")
						}

						for(var i = 0; i < data.data.list.length; i++) {
							books.list.push(data.data.list[i])
						}
					} else {
						mui.toast(data.message)
					}
				}, 'get')
			}

			if(mui.os.plus) {
				mui.plusReady(function() {
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					}, 1000);

				});
			} else {
				mui.ready(function() {
					mui('#pullrefresh').pullRefresh().pullupLoading();
				});
			}

			$(document).on("tap", ".message", function() {
				var obj = {
					"studentuid": $(this).attr("studentuid"),
					"readingrecorduid": $(this).attr("readingrecorduid")
				}
				common.open("readdetails.html", "readdetails.html", obj)
			})
		</script>
	</body>

</html>